---
import { type CollectionEntry, getCollection } from "astro:content";
import Comments from "../../components/Comments.astro";
import Layout from "../../layouts/PageLayout.astro";

export async function getStaticPaths() {
	const posts = await getCollection("blog");
	return posts.map((post) => ({
		params: { slug: post.slug },
		props: post,
	}));
}
type Props = CollectionEntry<"blog">;

const post = Astro.props;
const { Content, remarkPluginFrontmatter } = await post.render();
---

<style>
	.header {
		text-align: center;
	}
</style>

<Layout>
	<div class="header">
		<h1>{post.data.title}</h1>
		<p>
			<small>
				Posted
				<time datetime={post.data.pubDate.toISOString()}>{post.data.pubDate.toDateString()}</time>
				&nbsp;by&nbsp;{post.data.author}&nbsp;‐
				<strong>{remarkPluginFrontmatter.minutesRead}</strong>
			</small>
		</p>
	</div>
	<Content />
	<Comments />
</Layout>